<template>
  <h3>本地的 todo list 待办清单</h3>
  <button class="addBtn">创建</button>
  <el-table :data="list">
    <el-table-column prop="date" label="内容" width="180" />
    <el-table-column prop="name" label="时间" width="180" />
    <el-table-column label="操作">
      <button class="deleteBtn">删除</button>
      <button class="changeBtn">编辑</button>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data () {
    return {
      list: [
        { date: 1, name: 2 }
      ]
    }
  },
}
</script>
<style scoped>
.addBtn {
  width: 60px;
  height: 30px;
  background-color: #f6f6f6;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.deleteBtn,
.changeBtn {
  color: #fff;
  width: 60px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}
.deleteBtn{
  background-color: #f56c6c;
}
.changeBtn{
  background-color: #409eff;
}
</style>
